<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="PIXINVENT">
    <title>自助售货管理后台</title>
    <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
</head>
<body class="vertical-layout vertical-menu 2-columns   menu-expanded fixed-navbar"
      data-open="click" data-menu="vertical-menu" data-col="2-columns">
    <!-- fixed-top-->
    <nav class="header-navbar navbar-expand-md navbar navbar-with-menu fixed-top navbar-semi-dark navbar-shadow">
        <div class="navbar-wrapper">
            <div class="navbar-header">
                <ul class="nav navbar-nav flex-row">
                    <li class="nav-item mobile-menu d-md-none mr-auto"><a class="nav-link nav-menu-main menu-toggle hidden-xs" href="#"><i class="ft-menu font-large-1"></i></a></li>
                    <li class="nav-item">
                        <a class="navbar-brand" href="index.html">
                            <img class="brand-logo" alt="stack admin logo" src="app-assets/images/stack-logo-light.png">
                            <h2 class="brand-text">自助售货管理后台</h2>
                        </a>
                    </li>
                    <li class="nav-item d-md-none"> <a class="nav-link open-navbar-container" data-toggle="collapse" data-target="#navbar-mobile"><i class="fa fa-ellipsis-v"></i></a> </li>
                </ul>
            </div>
            <div class="navbar-container content">
                <div class="collapse navbar-collapse" id="navbar-mobile">
                    <ul class="nav navbar-nav mr-auto float-left">
                        <li class="nav-item d-none d-md-block"><a class="nav-link nav-menu-main menu-toggle hidden-xs" href="#"><i class="ft-menu"></i></a></li>
                    </ul>
                    <ul class="nav navbar-nav float-right">
                        <li class="dropdown dropdown-user nav-item"> <a class="dropdown-toggle nav-link dropdown-user-link" href="#" data-toggle="dropdown"> <span class="avatar avatar-online"> <img src="app-assets/images/head.jpg" alt="avatar"></span> <span class="user-name">欢迎您超级管理员</span> </a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <div class="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true">
        <div class="main-menu-content">
            <ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
                <li class=" nav-item only open"><a href="控制面板.html" target="iframe1"><i class="fa fa-dashboard"></i><span class="menu-title">控制面板</span></a></li>
                <li class=" nav-item">
                    <a href="#" target="iframe1"><i class="fa fa-desktop"></i><span class="menu-title">员工管理</span></a>
                    <ul class="menu-content">
                        <li><a class="menu-item" href="员工管理.html" target="iframe1">员工列表</a></li>

                    </ul>
                </li>
                <li class=" nav-item">
                    <a href="#" target="iframe1"><i class="fa fa-folder-open"></i><span class="menu-title">商品管理</span></a>
                    <ul class="menu-content">
                        <li><a class="menu-item" href="商品列表.html" target="iframe1">商品列表</a></li>
                        <li><a class="menu-item" href="商品分类.html" target="iframe1">商品分类</a></li>
                    </ul>
                </li>
                <li class=" nav-item">
                    <a href="#" target="iframe1"><i class="fa fa-user-circle-o"></i><span class="menu-title">供应商运营</span></a>
                    <ul class="menu-content">
                        <li><a class="menu-item" href="代理商列表.html" target="iframe1">供应商列表</a></li>
                        <li><a class="menu-item" href="结算记录.html" target="iframe1">结算记录</a></li>
                    </ul>
                </li>
                <li class=" nav-item">
                    <a href="#" target="iframe1"><i class="fa fa-user-circle-o"></i><span class="menu-title">采购管理</span></a>
                    <ul class="menu-content">
                        <li><a class="menu-item" href="采购商品.html" target="iframe1">采购商品</a></li>
                        <li><a class="menu-item" href="采购订单.html" target="iframe1">采购订单</a></li>
                        <li><a class="menu-item" href="结算单.html" target="iframe1">采购结算</a></li>
                    </ul>
                </li>
                <li class=" nav-item">
                    <a href="#" target="iframe1"><i class="fa fa-user-circle-o"></i><span class="menu-title">库存管理</span></a>
                    <ul class="menu-content">
                        <li><a class="menu-item" href="库存展示.html" target="iframe1">库存管理</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="app-content content">
        <iframe src="控制面板.html" frameborder="0" class="iframe1" name="iframe1"></iframe>
    </div>
    
    <!-- 告警消息弹框 -->
    <div id="alertToastContainer" class="alert-toast-container"></div>
    
    <footer class="footer footer-static footer-light navbar-border">
        <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2"> <span class="float-md-left d-block d-md-inline-block">Copyright &copy; 2024 <a class="text-bold-800 grey darken-2" href="https://www.bootstrapmb.com">bootstrapMB </a></span> </p>
    </footer>
    <script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
    <script src="app-assets/js/app-menu.js" type="text/javascript"></script>
    <script src="app-assets/js/app.js" type="text/javascript"></script>
    <script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
    <script>
        // WebSocket连接和告警处理
        let socket = null;
        let alertToastContainer = document.getElementById('alertToastContainer');
        // 建立WebSocket连接
        function connectWebSocket() {
            socket = new WebSocket('ws://localhost:25080/ws/inventory');
            // 连接成功
            socket.onopen = function(event) {
                console.log('WebSocket连接已建立');
            };
            // 接收消息
            socket.onmessage = function(event) {
                const alert = JSON.parse(event.data);
                console.log('收到告警消息:', alert);
                // 显示弹框
                showAlertToast(alert);
            };
            
            socket.onclose = function(event) {
                console.log('WebSocket连接已关闭');
                // 尝试重新连接
                setTimeout(connectWebSocket, 5000);
            };
            
            socket.onerror = function(error) {
                console.error('WebSocket错误:', error);
            };
        }
        
        // 显示告警弹框
        function showAlertToast(alert) {
            // 创建弹框元素
            const toastElement = document.createElement('div');
            toastElement.className = 'alert-toast';
            
            // 生成商品列表HTML
            let productListHTML = '';
            if (alert.lowStockProducts && alert.lowStockProducts.length > 0) {
                productListHTML = `
                    <ul class="alert-product-list">
                        ${alert.lowStockProducts.map(product => 
                            `<li>${product.productName}: ${product.quantity} (阈值: ${product.safeQuantity})</li>`
                        ).join('')}
                    </ul>
                `;
            }
            
            toastElement.innerHTML = `
                <div class="alert-toast-header">
                    <span>库存告警</span>
                    <span class="alert-close" onclick="closeAlertToast(this)">&times;</span>
                </div>
                <div class="alert-toast-body">
                    <p>${alert.message || '库存不足，请及时处理'}</p>
                    ${productListHTML}
                    <div class="alert-toast-actions">
                        <button class="btn btn-sm btn-primary" onclick="gotoStockPage(this)">查看库存</button>
                    </div>
                </div>
            `;
            
            // 添加到容器
            alertToastContainer.appendChild(toastElement);
            
            // 触发显示动画
            setTimeout(() => {
                toastElement.classList.add('show');
            }, 100);
            
            // 10秒后自动隐藏
            setTimeout(() => {
                if (toastElement.parentNode) {
                    closeAlertToast(toastElement.querySelector('.alert-close'));
                }
            }, 10000);
        }
        
        // 关闭告警弹框
        function closeAlertToast(element) {
            const toast = element.closest('.alert-toast');
            if (toast) {
                toast.classList.remove('show');
                // 动画结束后移除元素
                setTimeout(() => {
                    if (toast.parentNode) {
                        toast.parentNode.removeChild(toast);
                    }
                }, 300);
            }
        }
        
        // 跳转到库存页面
        function gotoStockPage(element) {
            // 先关闭弹框
            closeAlertToast(element);
            
            // 获取iframe并跳转到库存页面
            const iframe = document.querySelector('iframe[name="iframe1"]');
            if (iframe) {
                iframe.src = '库存展示.html';
            }
        }
        
        // 页面加载完成后连接WebSocket
        window.addEventListener('load', function() {
            // 连接WebSocket
            connectWebSocket();
        });
        
        $(document).ready(function () {
            $(".nav-item ").click(function () {
                $(".nav-item ").removeClass("active")
                $(this).addClass("active")

            })
        })

        $(function () {
            setTimeout(function () {
                echarts_1();
                echarts_2();
            }, 500);


            function echarts_1() {
                var myChart = echarts.init(document.getElementById('echart1'));

                option = {
   	tooltip: {
		trigger: 'axis',
		axisPointer: {
			lineStyle: {
				color: '#57617B'
			}
		}
	},
    "legend": {
		
      "data": [
		{"name": "数量"},
        {"name": "金额"},
      ],
      "top": "0%",
      "textStyle": {
       "color": "#666"//图例文字
      }
    },
	
    "xAxis": [
      {
        "type": "category",
		boundaryGap: false,//
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
		 axisLine: { lineStyle: {color: "#eee"}},
        axisLabel:  { textStyle: {color: "r#666", fontSize: '14', },
            },
		
        },
	],
    "yAxis": [
      {
        "type": "value",
        "name": "数量「单」",
		  "nameTextStyle": {color: '#666',},
        "min": 0,
     //  "max": 15,
        //"interval": 5,
		    //splitNumber:3,
        "axisLabel": {
          "show": true,
         
        },
        axisLine: {lineStyle: {color: '#eee'}},//左线色
        axisLabel: {textStyle: {color: '#666'}},
		    splitLine: {show:false,lineStyle: {color:"#eee"}},//x轴线
      },
      {
		      "min": 0,
      // "max": 15,
        "type": "value",
        "name": "金额「元」",
		//  splitNumber:3,
		  "nameTextStyle": {color: '#666',},
        "show": true,
        "axisLabel": {
          "show": true,
        
        },
		  axisLine: {lineStyle: {color: '#ddd'}},//右线色
		   splitLine: {show:true,lineStyle: {color:"#eee"}},//x轴线
		   axisLabel: {textStyle: {color: '#666'}},
      },
    ],
    "grid": {
      "top": "10%",
		"right":"30",
		"bottom":"30",
		"left":"30",
    },
    "series": [
      {
        "name": "数量",
		 type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
				color: 'rgba(0,0,0,.0)',
                width: 0
            }
        },
        areaStyle: {
            normal: {
                color:'rgba(255,106,125,.5)',
              
            }
        },
			itemStyle: {
			normal: {
			  color:'rgba(255,106,125,.5)',
			}
		},
        "data": [1,3,2,9,3,8,4,6,2,7,2,4],
       
      },
    
      {
        "name": "金额",
        "type": "line",
        "yAxisIndex": 1,
		  smooth: true,
        symbol: 'circle',
        symbolSize: 5,
		showSymbol: false,
        "data": [4,3,5,3,11,4,7, 3,4,2,7,3],
		   lineStyle: {
            normal: {
				color: 'rgba(0,0,0,.0)',
                width: 0
            }
        },
		  areaStyle: {
            normal: {
                 color:"rgba(255,158,114,.5)"
            }
        },
        "itemStyle": {
          "normal": {
           color:"rgba(255,158,114,.5)"
			 
          }
        },
      
      }
    ]
};
      

 		// 使用刚指定的配置项和数据显示图表。
 		myChart.setOption(option);
 		window.addEventListener("resize", function () {
 			myChart.resize();
 		});
 	}
		 function echarts_2() {
 		var myChart = echarts.init(document.getElementById('echart2'));

 		option = {
   	tooltip: {
		trigger: 'axis',
		axisPointer: {
			lineStyle: {
				color: '#57617B'
			}
		}
	},
    "legend": {
		
      "data": [
		{"name": "数量"},
        {"name": "金额"},
      ],
      "top": "0%",
      "textStyle": {
       "color": "#666"//图例文字
      }
    },
	
    "xAxis": [
      {
        "type": "category",
		boundaryGap: false,//
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
		 axisLine: { lineStyle: {color: "#eee"}},
        axisLabel:  { textStyle: {color: "r#666", fontSize: '14', },
            },
		
        },
	],
    "yAxis": [
      {
        "type": "value",
        "name": "数量「单」",
		  "nameTextStyle": {color: '#666',},
        "min": 0,
     //  "max": 15,
        //"interval": 5,
		    //splitNumber:3,
        "axisLabel": {
          "show": true,
         
        },
        axisLine: {lineStyle: {color: '#eee'}},//左线色
        axisLabel: {textStyle: {color: '#666'}},
		    splitLine: {show:false,lineStyle: {color:"#eee"}},//x轴线
      },
      {
		      "min": 0,
      // "max": 15,
        "type": "value",
        "name": "金额「元」",
		//  splitNumber:3,
		  "nameTextStyle": {color: '#666',},
        "show": true,
        "axisLabel": {
          "show": true,
        
        },
		  axisLine: {lineStyle: {color: '#ddd'}},//右线色
		   splitLine: {show:true,lineStyle: {color:"#eee"}},//x轴线
		   axisLabel: {textStyle: {color: '#666'}},
      },
    ],
    "grid": {
      "top": "10%",
		"right":"30",
		"bottom":"30",
		"left":"30",
    },
    "series": [
      {
        "name": "数量",
		 type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
				color: 'rgba(0,0,0,.0)',
                width: 0
            }
        },
        areaStyle: {
            normal: {
                color:'rgba(255,106,125,.5)',
              
            }
        },
			itemStyle: {
			normal: {
			  color:'rgba(255,106,125,.5)',
			}
		},
        "data": [1,3,2,9,4,5,3],
       
      },
    
      {
        "name": "金额",
		
        "type": "line",
        "yAxisIndex": 1,
		  smooth: true,
        symbol: 'circle',
        symbolSize: 5,
		showSymbol: false,
        "data": [4,1,5,3,8,2,3],
		   lineStyle: {
            normal: {
				color: 'rgba(0,0,0,.0)',
                width: 0
            }
        },
		  areaStyle: {
            normal: {
                color:"rgba(255,158,114,.5)"
            }
        },
        "itemStyle": {
          "normal": {
             color:"rgba(255,158,114,.5)"
			 
          }
        },
      
      }
    ]
};
      

 		// 使用刚指定的配置项和数据显示图表。
 		myChart.setOption(option);
 		window.addEventListener("resize", function () {
 			myChart.resize();
 		});
 	}
 })

	</script>
    <style>
        /* 告警弹框容器 */
        .alert-toast-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 10px;
        }
        
        /* 告警弹框样式 */
        .alert-toast {
            width: 350px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            transform: translateX(400px);
            transition: transform 0.3s ease-in-out;
            max-height: 300px;
            overflow: hidden;
        }
        
        .alert-toast.show {
            transform: translateX(0);
        }
        
        .alert-toast-header {
            padding: 10px 15px;
            background: #dc3545;
            color: white;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .alert-close {
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
        }
        
        .alert-toast-body {
            padding: 15px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .alert-toast-body p {
            margin: 0 0 10px 0;
            font-size: 14px;
        }
        
        .alert-product-list {
            padding-left: 20px;
            margin: 10px 0;
        }
        
        .alert-product-list li {
            font-size: 12px;
            margin-bottom: 3px;
        }
        
        .alert-toast-actions {
            text-align: right;
            margin-top: 10px;
        }
        
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
            color: white;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            border: none;
        }
        
        .btn-primary:hover {
            background-color: #0069d9;
        }
    </style>
</body>
</html>